<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import HospitalBlurbCard from '../components/HospitalBlurbCard.vue';
import { reqHospitalLevelAndRegion, reqHospital, reqHospitalInfo } from '../api/hospitalsInfo'
import Tips from '../components/Tips.vue'
// import { type hospitalList, type Hospital, type HospitalInfo } from '@/api/type.ts'
import type { hospitalList, Hospital, HospitalInfo } from '@/api/type.ts'

const hospitalName = ref('')


const querySearchAsync = async (queryString: string, cb: (arg: any) => void) => {
    // 根据queryString调用查询医院接口
    const res: HospitalInfo = await reqHospitalInfo(queryString)
    // console.log('查询医院接口返回数据', res.data)
    let results = queryString ?
        res.data.filter(function (element) {
            return element.hosname.indexOf(queryString) === 0
        })
        : res.data
    // console.log('筛选后的医院列表', results)
    // 将数据变成组件需要的格式 [{value: 'xxx', yyy: 'zzz'}]
    let aa = results.map(function (element) {
        return {
            value: element.hosname,
            hoscode: element.hoscode
        }
    })
    // console.log('这是按组件规定格式处理后的数据', aa)
    cb(aa)
}
// const createFilter = (queryString: string) => {
//     return (restaurant: LinkItem) => {
//         console.log(restaurant.value)
//         return (
//             restaurant.value.hosname.indexOf(queryString) === 0
//         )
//     }
// }

const handleSelect = (item: Record<string, any>) => {
    // console.log(item.hoscode)
    router.push('/hospital/register?hoscode=' + item.hoscode)
}


let blurbCardLists = ref<Hospital[]>([])
interface HospitalLevelAndRegion {
    "id": number,
    "createTime": string,
    "updateTime": string,
    "isDeleted": number,
    "param": {},
    "parentId": number,
    "name": string,
    "value": string,
    "dictCode": string,
    "hasChildren": boolean
}
type HospitalLevelAndRegionArr = HospitalLevelAndRegion[];
let activeLevel = ref('')
let levelOptions = ref<HospitalLevelAndRegionArr>([])
const getLevels = async () => {
    const res = await reqHospitalLevelAndRegion('HosType')
    // console.log('获取医院等级列表', res)
    levelOptions.value = res.data
}
getLevels()
// 切换等级
const changeLevel = (val: string) => {
    activeLevel.value = val
    getHospitalInfo()
}
let activeArea = ref('')
const areaOptions = ref<HospitalLevelAndRegionArr>([])
// 
const getAreas = async () => {
    const res = await reqHospitalLevelAndRegion('Beijin')
    // console.log('获取医院地区列表', res)
    areaOptions.value = res.data
}
getAreas()
// 切换地区
const changeArea = (val: string) => {
    activeArea.value = val
    getHospitalInfo()
}
// 获取指定等级和地区下某页医院列表数据
const getHospitalInfo = async () => {
    const res: hospitalList = await reqHospital(currentPage.value, pageSize.value, activeLevel.value, activeArea.value)
    // console.log('获取指定等级和地区下某页医院列表数据', res)
    totalNum.value = res.data.totalElements
    blurbCardLists.value = res.data.content
}
onMounted(() => {
    getHospitalInfo()
})

// 
let currentPage = ref(1)
let pageSize = ref(10)
let totalNum = ref(100)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    //   console.log(`每页 ${val} 条`)
    pageSize.value = val
    getHospitalInfo()
}
const handleCurrentChange = (val: number) => {
    //   console.log(`当前${val}页 `)
    currentPage.value = val
    getHospitalInfo()
}
import { useRouter } from 'vue-router'
const router = useRouter()
// 点击卡片后跳转到详情页
const showDetails = (hoscode: string) => {
    // console.log(hoscode)
    router.push('/hospital/register?hoscode=' + hoscode)
}
</script>

<template>
    <div class="hospital-container">
        <!-- 轮播图区域 -->
        <el-carousel :interval="6000" height="400px" motion-blur>
            <el-carousel-item v-for="item in 3" :key="item">
            </el-carousel-item>
        </el-carousel>
        <!-- 搜索框 -->
        <div class="hospital-search">
            <el-autocomplete v-model="hospitalName" :trigger-on-focus="false" :fetch-suggestions="querySearchAsync"
                placeholder="请输入医院名称" @select="handleSelect" clearable />
            <el-button :icon="Search">搜索</el-button>
        </div>
        <!-- 全部医院选择展示区域 -->
        <div class="hospitals-show">
            <div class="main-show">
                <p>医院</p>
                <div class="level-lists">
                    等级：
                    <ul>
                        <li :class="{ activeLi: activeLevel === '' }" @click="changeLevel('')">全部</li>
                        <li v-for="item in levelOptions" :key="item.id" @click="changeLevel(item.value)"
                            :class="{ activeLi: activeLevel === item.value }">{{ item.name }}
                        </li>
                    </ul>
                </div>
                <div class="area-lists">
                    地区：
                    <ul>
                        <li :class="{ activeLi: activeArea === '' }" @click="changeArea('')">全部</li>
                        <li v-for="item in areaOptions" :key="item.id" @click="changeArea(item.value)"
                            :class="{ activeLi: activeArea === item.value }">{{ item.name }}</li>
                    </ul>
                </div>
                <!-- 卡片信息展示区 -->
                <div class="hospital-blurb-card-container" v-if="blurbCardLists.length > 0">
                    <HospitalBlurbCard v-for="(item) in blurbCardLists" :key="item.id"
                        :hospitalTime="item.bookingRule.releaseTime" :hospitalLevel="item.param.hostypeString"
                        :hospitalName="item.hosname" @click="showDetails(item.hoscode)">
                    </HospitalBlurbCard>
                </div>
                <el-empty v-else description="暂无数据" />
                <!-- 分页器 -->
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]" size="default" :disabled="disabled" :background="background"
                    layout=" prev, pager, next, jumper,total, sizes" :total="totalNum"
                    @current-change="handleCurrentChange" @size-change="handleSizeChange" />
            </div>
            <div class="other-show">
                <Tips></Tips>
            </div>

        </div>
    </div>
</template>

<style scoped lang="scss">
.hospital-container {
    width: 1200px;

    .el-carousel__item {
        background: url('../assets/images/web-banner-1.png') no-repeat center center /1380px 400px;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }

    .hospital-search {
        width: 400px;
        margin: 0 auto;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

        .el-input {
            width: 300px;
        }

        .el-button {
            margin-left: 10px;
            background-color: var(--theme-color);
            color: white;
        }
    }

    .hospitals-show {
        width: 100%;
        margin-top: 20px;
        display: flex;
        align-items: start;
        justify-content: start;

        .main-show {
            flex: 1;

            p {
                font-weight: 600;
                font-size: 1.25rem;
                margin-bottom: 10px;
                color: var(--gray-color2);
            }

            .level-lists,
            .area-lists {
                display: flex;
                flex-wrap: wrap;
                font-size: 1rem;
                color: var(--gray-color2);

            }

            ul {
                display: flex;
                flex-wrap: wrap;
                width: calc(100% - 50px);

                li {
                    margin: 0 10px 10px 0;
                    cursor: pointer;
                }

                li:hover,
                .activeLi {
                    color: var(--theme-color);
                }
            }

            .hospital-blurb-card-container {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            :deep(.el-pagination) {
                position: relative;

                .el-pagination__total {
                    position: absolute;
                    right: 0px;
                }

                .el-pagination__sizes {
                    position: absolute;
                    right: 80px;
                }
            }
        }

        .other-show {
            width: 20%;
            margin-left: 20px;
            margin-top: 20px;
        }
    }


}
</style>